import React, { useState, useEffect } from 'react';
import mammoth from 'mammoth';
import { Spin } from 'antd';
import { request } from '@/zero/utils/axios';
import styles from './index.less';

const Index = props => {
  const { src, ...rest } = props;

  const [data, setData] = useState(null);

  useEffect(() => {
    if (src) {
      request(src, {
        responseType: 'arraybuffer',
      }).then(response => {
        if (response.success) {
          mammoth.convertToHtml({ arrayBuffer: new Uint8Array(response.data) }).then(result => {
            setData(result);
          });
        }
      });
    }
  }, [src]);

  return (
    <div {...rest}>
      {data ? (
        <div className={styles.docx} dangerouslySetInnerHTML={{ __html: data.value }} />
      ) : (
        <Spin style={{ display: 'block', margin: '0 auto' }} />
      )}
    </div>
  );
};

Index.displayName = 'DocxViewer';
export default Index;
